<template>
  <el-drawer :title="form.id ? (detail ? '详情' : '编辑') : '添加'" v-model="visible" size="50%">
    <el-form ref="dataFormRef" :model="form" :rules="dataRules" :disabled="detail"
             v-loading="loading">
      <el-card class="box-card" shadow="always">
        <div slot="header"><span>抵押人</span></div>
        <el-row :gutter="24">
          <el-col :span="12" class="mb20">
            <el-form-item label="名称" prop="dyrMc">
              <el-input v-model="form.dyrMc" placeholder="请输入抵押人名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mb20">
            <el-form-item label="地址" prop="dyrDz">
              <el-input v-model="form.dyrDz" placeholder="请输入抵押人地址"/>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mb20">
            <el-form-item label="法人代表" prop="dyrFrdb">
              <el-input v-model="form.dyrFrdb" placeholder="请输入抵押人法人代表"/>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mb20">
            <el-form-item label="代理人" prop="dyrDlr">
              <el-input v-model="form.dyrDlr" placeholder="请输入抵押人代理人"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card" shadow="always">
        <div slot="header"><span>抵押权人</span></div>
        <el-row :gutter="24">
          <el-col :span="12" class="mb20">
            <el-form-item label="名称" prop="dyqrMc">
              <el-input v-model="form.dyqrMc" placeholder="请输入抵押权人名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mb20">
            <el-form-item label="地址" prop="dyqrDz">
              <el-input v-model="form.dyqrDz" placeholder="请输入抵押权人地址"/>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mb20">
            <el-form-item label="法人代表" prop="dyqrFrdb">
              <el-input v-model="form.dyqrFrdb" placeholder="请输入抵押权人法人代表"/>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mb20">
            <el-form-item label="代理人" prop="dyqrDlr">
              <el-input v-model="form.dyqrDlr" placeholder="请输入抵押权人代理人"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-row :gutter="24">
        <el-col :span="24" class="mb20">
          <el-form-item label="抵押物登记的原因" prop="djyy">
            <el-input type="textarea" v-model="form.djyy" placeholder="请输入申请抵押物登记的原因"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-card class="box-card" shadow="always">
        <div slot="header"><span>抵押物情况</span></div>
        <el-row :gutter="24">
          <sc-form-table v-model="form.mortgageApplyDetailsList" :addTemplate="childTemp" @delete="deleteChild"
                         placeholder="暂无数据">
            <el-table-column label="名称" prop="mc">
              <template #default="{ row, $index }">
                <el-form-item :prop="`mortgageApplyDetailsList.${$index}.mc`"
                              :rules="[{ required: true, trigger: 'blur' }]">
                  <el-input v-model="row.mc" style="width: 250%"/>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="数量" prop="sl">
              <template #default="{ row, $index }">
                <el-form-item :prop="`mortgageApplyDetailsList.${$index}.sl`"
                              :rules="[{ required: true, trigger: 'blur' }]">
                  <el-input v-model="row.sl" style="width: 250%"/>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="价值（万元）" prop="jz">
              <template #default="{ row, $index }">
                <el-form-item :prop="`mortgageApplyDetailsList.${$index}.jz`"
                              :rules="[{ required: true, trigger: 'blur' }]">
                  <el-input v-model="row.jz" style="width: 250%"/>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="所有权或使用权" prop="syq">
              <template #default="{ row, $index }">
                <el-form-item :prop="`mortgageApplyDetailsList.${$index}.syq`"
                              :rules="[{ required: true, trigger: 'blur' }]">
                  <el-input v-model="row.syq" style="width: 250%"/>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="林权证号" prop="lqzh">
              <template #default="{ row, $index }">
                <el-form-item :prop="`mortgageApplyDetailsList.${$index}.lqzh`"
                              :rules="[{ required: true, trigger: 'blur' }]">
                  <el-input v-model="row.lqzh" style="width: 250%"/>
                </el-form-item>
              </template>
            </el-table-column>
          </sc-form-table>
        </el-row>
      </el-card>
      <el-card class="box-card" shadow="always">
        <div slot="header"><span>担保的主债权</span></div>
        <el-row :gutter="24">
          <el-col :span="12" class="mb20">
            <el-form-item label="债权种类" prop="zzqzl">
              <el-input v-model="form.zzqzl" placeholder="请输入被担保的主债权种类"/>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mb20">
            <el-form-item label="债权数额" prop="zzqse">
              <el-input v-model="form.zzqse" placeholder="请输入被担保的主债权数额"/>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mb20">
            <el-form-item label="债务期限" prop="lxzwqx">
              <el-input v-model="form.lxzwqx" placeholder="请输入债务人履行债务的期限"/>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mb20">
            <el-form-item label="担保范围" prop="dydbfw">
              <el-input v-model="form.dydbfw" placeholder="请输入抵押担保范围"/>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mb20">
            <el-form-item label="抵押起日" prop="dyqr">
              <el-date-picker type="date" placeholder="请选择抵押起日" v-model="form.dyqr"
                              :value-format="dateStr"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mb20">
            <el-form-item label="抵押止日" prop="dyzr">
              <el-date-picker type="date" placeholder="请选择抵押止日" v-model="form.dyzr"
                              :value-format="dateStr"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card" shadow="always">
        <div slot="header"><span>抵押人签字</span></div>
        <el-row :gutter="24">
          <el-col :span="12" class="mb20">
            <el-form-item label="签字" prop="dyrqz">
              <el-input v-model="form.dyrqz" placeholder="请输入抵押人签章"/>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mb20">
            <el-form-item label="日期" prop="dyrqzrq">
              <el-date-picker type="date" placeholder="请选择抵押人签章日期" v-model="form.dyrqzrq"
                              :value-format="dateStr"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card" shadow="always">
        <div slot="header"><span>抵押权人签字</span></div>
        <el-row :gutter="24">
          <el-col :span="12" class="mb20">
            <el-form-item label="签章" prop="dyqrqz">
              <el-input v-model="form.dyqrqz" placeholder="请输入抵押权人签章"/>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mb20">
            <el-form-item label="日期" prop="dyqrqzrq">
              <el-date-picker type="date" placeholder="请选择抵押权人签章日期" v-model="form.dyqrqzrq"
                              :value-format="dateStr"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card" shadow="always">
        <div slot="header"><span>审核人意见</span></div>
        <el-row :gutter="24">
          <el-col :span="12" class="mb20">
            <el-form-item label="意见" prop="shryj">
              <el-input v-model="form.shryj" placeholder="请输入审核人意见"/>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mb20">
            <el-form-item label="签字" prop="shrqz">
              <el-input v-model="form.shrqz" placeholder="请输入审核人签字"/>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mb20">
            <el-form-item label="审核日期" prop="shrrq">
              <el-date-picker type="date" placeholder="请选择审核日期" v-model="form.shrrq"
                              :value-format="dateStr"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card" shadow="always">
        <div slot="header"><span>经办人意见</span></div>
        <el-row :gutter="24">
          <el-col :span="12" class="mb20">
            <el-form-item label="意见" prop="jbryj">
              <el-input v-model="form.jbryj" placeholder="请输入经办人意见"/>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mb20">
            <el-form-item label="签章" prop="jbrqz">
              <el-input v-model="form.jbrqz" placeholder="请输入经办人签章"/>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mb20">
            <el-form-item label="经办日期" prop="jbrq">
              <el-date-picker type="date" placeholder="请选择经办日期" v-model="form.jbrq"
                              :value-format="dateStr"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
    </el-form>
    <template #footer>
        <span class="dialog-footer">
          <el-button @click="visible = false">取 消</el-button>
          <el-button type="primary" @click="onSubmit" :disabled="loading">确 认</el-button>
        </span>
    </template>
  </el-drawer>
</template>

<script setup lang="ts" name="MortgageApplyRegistrationDialog">
import {useDict} from '/@/hooks/dict';
import {rule} from '/@/utils/validate';
import {useMessage} from "/@/hooks/message";
import {getObj, addObj, putObj, delChildObj, validateExist} from '/@/api/forestry/mortgageApplyRegistration'

const scFormTable = defineAsyncComponent(() => import('/@/components/FormTable/index.vue'));
const emit = defineEmits(['refresh']);

// 定义变量内容
const dataFormRef = ref();
const visible = ref(false);
const loading = ref(false);
const detail = ref(false);

// 定义字典

// 提交表单数据
const form = reactive({
  id: '',
  dyrMc: '',
  dyrDz: '',
  dyrFrdb: '',
  dyrDlr: '',
  dyqrMc: '',
  dyqrDz: '',
  dyqrFrdb: '',
  dyqrDlr: '',
  djyy: '',
  zzqzl: '',
  zzqse: '',
  lxzwqx: '',
  dydbfw: '',
  dyqr: '',
  dyzr: '',
  dyrqz: '',
  dyrqzrq: '',
  dyqrqz: '',
  dyqrqzrq: '',
  shryj: '',
  shrqz: '',
  shrxm: '',
  shrrq: '',
  jbryj: '',
  jbrqz: '',
  jbrxm: '',
  jbrq: '',
  mortgageApplyDetailsList: [],
});

const childTemp = reactive({
  id: '',
  pid: '',
  mc: '',
  sl: '',
  jz: '',
  syq: '',
  lqzh: '',
  delFlag: '',
  createBy: '',
  createTime: '',
  updateBy: '',
  updateTime: '',
})

// 定义校验规则
const dataRules = ref({
  dyrMc: [{required: true, message: '抵押人名称不能为空', trigger: 'blur'}],
  dyrDz: [{required: true, message: '抵押人地址不能为空', trigger: 'blur'}],
  dyrFrdb: [{required: true, message: '抵押人法人代表不能为空', trigger: 'blur'}],
  dyrDlr: [{required: true, message: '抵押人代理人不能为空', trigger: 'blur'}],
  dyqrMc: [{required: true, message: '抵押权人名称不能为空', trigger: 'blur'}],
  dyqrDz: [{required: true, message: '抵押权人地址不能为空', trigger: 'blur'}],
  dyqrFrdb: [{required: true, message: '抵押权人法人代表不能为空', trigger: 'blur'}],
  dyqrDlr: [{required: true, message: '抵押权人代理人不能为空', trigger: 'blur'}],
  djyy: [{required: true, message: '申请抵押物登记的原因不能为空', trigger: 'blur'}],
  zzqzl: [{required: true, message: '被担保的主债权种类不能为空', trigger: 'blur'}],
  zzqse: [{required: true, message: '被担保的主债权数额不能为空', trigger: 'blur'}],
  lxzwqx: [{required: true, message: '债务人履行债务的期限不能为空', trigger: 'blur'}],
  dydbfw: [{required: true, message: '抵押担保范围不能为空', trigger: 'blur'}],
  dyqr: [{required: true, message: '抵押起日不能为空', trigger: 'blur'}],
  dyzr: [{required: true, message: '抵押止日不能为空', trigger: 'blur'}],
})

// 打开弹窗
const openDialog = (id: string, isDetail: boolean) => {
  visible.value = true
  detail.value = isDetail
  form.id = ''

  // 重置表单数据
  nextTick(() => {
    dataFormRef.value?.resetFields();
    form.mortgageApplyDetailsList = [];
  });

  // 获取mortgageApplyRegistration信息
  if (id) {
    form.id = id
    getMortgageApplyRegistrationData(id)
  }
};

// 提交
const onSubmit = async () => {
  const valid = await dataFormRef.value.validate().catch(() => {
  });
  if (!valid) return false;

  try {
    loading.value = true;
    form.id ? await putObj(form) : await addObj(form);
    useMessage().success(form.id ? '修改成功' : '添加成功');
    visible.value = false;
    emit('refresh');
  } catch (err: any) {
    useMessage().error(err.msg);
  } finally {
    loading.value = false;
  }
};
// 删除子表数据
const deleteChild = async (obj: { id: string }) => {
  if (obj.id) {
    try {
      await delChildObj([obj.id]);
      useMessage().success('删除成功');
    } catch (err: any) {
      useMessage().error(err.msg);
    }
  }
};

// 初始化表单数据
const getMortgageApplyRegistrationData = (id: string) => {
  // 获取数据
  getObj({id: id}).then((res: any) => {
    Object.assign(form, res.data[0])
  })
};

// 暴露变量
defineExpose({
  openDialog
});
</script>
